<template>
    <div>
        <el-select v-bind="$attrs" v-model="value" @change="changeEvents">
            <el-option v-for="item in options" :key="item.id" :label="item.processName" :value="item.id" />
        </el-select>
    </div>
</template>
<script setup>
import { getProcessList } from '@/api/screen/index';
const props = defineProps({
    projectId: {
        type: Number,
        default: ''
    },
    modelValue: {
        type: Number,
        default: ''
    }
})
const emits = defineEmits(['change', 'processData', 'update:modelValue'])
const options = ref([])
const value = computed({
    get() {
        return props.modelValue
    },
    set(val) {
        emits('update:modelValue', val)
    }
})
getProcessList({ projectId: props.projectId }).then(res => {
    options.value = res.result.data
    if(value?.value){
        emits('processData', options.value.find(item => item.id === value?.value))
    }
})

const changeEvents = (e) => {
    emits('change', e)
    emits('processData', options.value.find(item => item.id === e))
}
</script>
<style lang="scss" scoped></style>